//rfc 快速生成一个函数式组件，并抛出
import React from 'react'
import Mock from 'mockjs'
let arr=['服务端开发','组件化开发','渐进式开发'];
let data=Mock.mock({
  "list|3":[{
    id:"@id",
    name:"@cname",
    "children|1-3":[{
      id:"@id",
      img:"@image(100x100,@color)",
      title:"@ctitle(5)"
    }]
  }]
})
export default function index() {
  return (
    <div>
      {
        arr.map((item,index)=>{
          return <li key={index}>{item}</li>
        })
      }
      <ul>
        {
          data.list.map((item)=>{
            return <li key={item.id}>
              <h3>{item.name}</h3>
              {item.children.map((value)=>{
                return <div>
                  <img src={value.img} alt="" />
                  <p>{value.title}</p>
                </div>
              })}
            </li>
          })
        }
      </ul>
    </div>
  )
}
//rfce 快速生成一个函数式组件，在最后单独抛出
// import React from 'react'

// function index() {
//   return (
//     <div>index</div>
//   )
// }
// //可以在抛出之前对组件进行改变
// export default index
// //rcc 快速生成一个class类组件，直接抛出
// import React, { Component } from 'react'
// // class 定义一个类，List类名，extends 继承于 Component
// export default class index extends Component {
//     //类组件了里面有个render函数，函数里面在去return dom结构
//   render() {
//     return (
//       <div>index</div>
//     )
//   }
// }
// //rce快速定义一个类组件，在最后单独抛出【最常用】
// import React, { Component } from 'react'

// export class index extends Component {
//   render() {
//     return (
//       <div>index</div>
//     )
//   }
// }

// export default index
